import * as React from "react";
import { inject, observer } from "mobx-react";
import { Form, Input, Button, Modal } from 'antd';
import { WrappedFormUtils } from 'antd/lib/form/Form';
import { HomeStore, } from '../../../../store';
import { resetPassword } from '../../../../basicData/api';

const FormItem = Form.Item;

interface IProps {
  history: History;
  children?: AudioContextLatencyCategory;
  form: WrappedFormUtils;
  homeStore: HomeStore;
}

@inject("homeStore")
@observer
class ChangePwd extends React.Component<IProps, {}> {

  handleSubmit = (e: React.FormEvent<any>) => {
    e.preventDefault();
    const _this = this;
    const { userId } = _this.props.homeStore;
    this.props.form.validateFields((
      err: Error | null,
      values: { currentPassword: string, newPassword: string, confirm: string }
    ) => {
      if (!err) {
        const param = {
          id: Number(userId),
          currentPassword: values.currentPassword,
          newPassword: values.newPassword
        }
        resetPassword(param).then((res: any) => {
          if(res.success){
            Modal.success({
              title: '修改密码成功',
              content: '点击确定退出系统重新登录',
              okText: '确定',
              onOk: () => {window.location.replace('/#/login')}
            })
          }
        })
      }
    });
  }

  compareToFirstPassword = (rule: object, value: string, callback: Function) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPassword')) {
      callback('两次密码不一致！');
    } else {
      callback();
    }
  }


  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };

    return (
      <Form onSubmit={this.handleSubmit} className="Change-form" style={{width: 400}}>
        <h3>修改密码</h3>
        <FormItem {...formItemLayout} label="原密码">
          {getFieldDecorator('currentPassword', {
            rules: [{ required: true, message: '请输入原密码!' }],
          })(
            <Input
              type="password"
              placeholder="请输入密码"
            />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="新密码">
          {getFieldDecorator('newPassword', {
            rules: [{ required: true, message: '请输入新密码!' }],
          })(
            <Input
              type="password"
              placeholder="请输入新密码"
            />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="确认密码"
        >
          {getFieldDecorator('confirm', {
            rules: [{
              required: true, message: '请确认您的密码!',
            }, {
              validator: this.compareToFirstPassword,
            }],
          })(
            <Input type="password" placeholder="请确认新密码" />
          )}
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit" style={{marginRight: 16}}>
            确定
          </Button>
          <Button onClick={() =>this.props.history.go(-1)}>
            取消
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(ChangePwd)